<template>
    <div class="box_cont flex_column_between" v-loading="loading">
        <audio :src="voiceUrl" controls ref="audio" class="po" @ended="playEnd" style="display:none" />
        <div class="">
            <h5 class="words_name">{{ currentWord && currentWord.word }}</h5>
            <p class="w_tip" v-if="!isStart">停留时间超过10秒，建议选择不认识</p>
            <p class="w_tip" v-else>倒计时：{{countDown}}秒</p>
        </div>
        <options ref="options" :word="currentWord" :isChoose="isChoose" @answer="chooseOptionFun" v-if="currentWord"></options>
        <div class="words_bottom flex_c_c">
            <div class="num_box flex_center_center bgGreen">
                <div class="_cont">{{ rightNumber }}</div>
            </div>
            <div class="num_box flex_center_center bgRed">
                <div class="_cont">{{ wrongNumber }}</div>
            </div>
            <div class="num_box flex_center_center bgtheme">
                <div class="_cont">{{ totalNumber }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { wordsList, vocabularyAnswer } from '@/api/vocabulary.js'
import options from './components/question.vue'
import bear_content from '@/views/components/bear_content.vue'

export default {
    components: {
        options,
        bear_content
    },
    data() {
        return {
            loading: false,
            examId: '',
            wordsList: [],
            currentIndex: 0,
            currentWord: null,
            isContinuousWrong: 0, //连续错误数
            wrongNumber: 0,
            rightNumber: 0,
            totalNumber: 0,
            answerList: [],
            isChoose: true,
            isStart: false,
            timer: null,
			countDown: 10,
            voiceUrl: '',
            learnId: 0,
            userId: 0,
            flag: null // 1: 从课程类型进入
        }
    },
    mounted(){
        this.examId = this.$route.query.id
        this.learnId = this.$route.query.learnId
        this.userId = this.$route.query.userId
        this.flag = this.$route.query.flag
        this.getWords()
    },
    methods:{
        getWords() {
            this.loading = true
            wordsList({
                id: this.examId
            }).then(res=>{
                this.loading = false
                if(res.error == 0){
                    this.wordsList = res.data
                    this.totalNumber = this.wordsList.length
                    this.currentWord = this.wordsList[this.currentIndex]
                    // this.playAudio(this.currentWord)
                    //进入倒计时
                    this.isStart = true
                    if (!this.timer) {
                        this.timer = setInterval(()=>{
                            this.countDown = this.countDown - 1
                            if(!this.countDown){
                                clearInterval(this.timer)
                                this.isStart = false
                                this.countDown = 10
                                this.$refs.options.chooseFun()
                            }
                        },1000)
                    }
                }
            })
        },
        chooseOptionFun(row) {
            this.isChoose = false
            if (this.timer) {
                clearInterval(this.timer)
                this.isStart = false
                this.countDown = 10
            }
            let answer = {
                id: row.id,
                answer: row.answer
            }
            this.answerList.push(answer)
            if (row.answer == row.corrects) {
                this.rightNumber++
                this.isContinuousWrong = 0
            }else{
                this.wrongNumber++
                this.isContinuousWrong++
            }
            this.totalNumber --
            if ((this.rightNumber == 0 && this.wrongNumber == 5) || this.wrongNumber == 7 || this.isContinuousWrong >= 5) {
                //连续错误5个或累计错7个，自动提交
                this.$message.success('测试结束')
                this.submitAnswer()
            }else{
                this.currentIndex++
                if (this.currentIndex >= this.wordsList.length) {
                    this.$message.success('测试结束')
                    this.loading = true
                    this.submitAnswer()
                    return
                }else{
                     setTimeout(() => {
                        this.changeWord()
                    }, 800);
                }
            }
        },
        changeWord() {
            this.$refs.options.initActived()
            this.currentWord = this.wordsList[this.currentIndex]
            // this.playAudio(this.currentWord)
            this.isChoose = true
            this.overtimeSubmit()
        },
        submitAnswer() {
            vocabularyAnswer({
                id: this.examId,
                answers: this.answerList
            }).then(res=>{
                if(res.error == 0){
                    let query = {}
                    if (this.learnId) {
                        query.learnId = this.learnId
                    }
                    if (this.userId) {
                        query.userId = this.userId
                    }
                    if (this.flag) {
                        query.flag = this.flag
                    }
                    this.$router.push({
                       path: '/vocabulary/exam/list',
                       query: query
                    })
                    this.loading = false
                }
            })
        },
        overtimeSubmit() {
            //超过10秒，自动选择不认识
            this.isStart = true
            this.timer = setInterval(()=>{
                this.countDown = this.countDown - 1
                if(!this.countDown){
                    window.clearInterval(this.timer)
                    this.isStart = false
                    this.countDown = 10
                    this.$refs.options.chooseFun()
                }
            },1000)
        },
        playAudio(row) {
            this.voiceUrl = row.voiceFile.url
            this.$nextTick(() => {
                this.$refs.audio.play()
            })
        },
        playEnd() {
            this.voiceUrl = ''
        },
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

    .po{
        width: 0;
        height: 0;
    }
    .box_cont{
        padding: 2rem 0;
        text-align: center;
        .words_name{
            font-size: 7rem;
            font-weight: bold;
            color: #1A1A1A;
        }
        .w_tip{
            color: #767676;
            font-size: 2.4rem;
            margin-top: 5px;
        
        }
    }
    .words_cont{
        width: 100%;
        height: 0;
        flex: 1;
        margin-top: .20rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding: 0 8rem;
        .item{
            width: 49%;
            padding: 4.7rem 4rem;
            text-align: center;
            font-size: 3rem;
            color: #3A3F5E;
            border-radius: 10px;
            background: #F7F8FA;
            &:hover{
                background: #E6FFEC;
                color: #40D463;
            }
            img{
                float: right;
            }
        }
        overflow-y: scroll;
            &::-webkit-scrollbar {
                width: 6px;
                height: 1px;
                }
            &::-webkit-scrollbar-thumb { 
                border-radius: 5px;
                background-color:#019E69;
            }
            &::-webkit-scrollbar-track { 
                background: #fff;
                border-radius: 5px;
            }
    }
    .words_bottom{
        width: 100%;
        border-top: 2px solid #F7F8FA;
        padding-top: 2rem;
        .num_box{
            width: 7rem;
            height: 7rem;
            border-radius: 4px;
            ._cont{
                width: 5.6rem;
                height: 5.6rem;
                line-height: 5.6rem;
                background: #fff;
                border-radius: 50%;
                font-size: 3rem;
            }
        }
        .bgGreen{
            color: $color8;
        }
        .bgRed{
            margin: 0 4.8rem;
            color: #FF5252;
        }
        .bgtheme{
            color: $theme-color;
        }
    }
</style>